import { Graphics, Point } from "pixi.js";
import { BoneController } from "../../controllers/BoneController";
import { ItransformableItem } from "../../controllers/ITransformableItem";

export class Transform extends Graphics {
    public arrowDown: Graphics;
    //public arrowScale: Graphics;
    public target: ItransformableItem | null = null;

    constructor() {
        super();
        this.lineStyle(2, "red", 1);
        this.moveTo(0, 0);
        this.lineTo(40, 0);

        this.beginFill("red");
        this.drawPolygon([
            new Point(25, 5),             //First point
            new Point(40, 0),              //Second point
            new Point(25, -5),           //Third point
        ]);

        // // //Fill shape's color
        this.endFill();
        this.tint = "red"
        this.zIndex = 2;

        let arrowDown = new Graphics();
        arrowDown.lineStyle(2, "green", 1);
        arrowDown.moveTo(0, 0);
        arrowDown.lineTo(40, 0);
        arrowDown.beginFill("green");
        arrowDown.drawPolygon([
            new Point(25, 5),             //First point
            new Point(40, 0),              //Second point
            new Point(25, -5),           //Third point
        ]);

        // // //Fill shape's color
        arrowDown.endFill();
        arrowDown.tint = "green"
        arrowDown.rotation = 90 * Math.PI / 180;
        this.addChild(arrowDown);
        this.arrowDown = arrowDown;


        // let arrowScale = new Graphics();
        // arrowScale.lineStyle(2, "yellow", 1);
        // arrowScale.moveTo(0, 0);
        // arrowScale.lineTo(scaleArrowBasicLength, 0);
        // arrowScale.beginFill("yellow");
        // arrowScale.drawPolygon([
        //     new Point(scaleArrowBasicLength - 10, -5),             //First point
        //     new Point(scaleArrowBasicLength, -5),              //Second point
        //     new Point(scaleArrowBasicLength, 5),           //Third point
        //     new Point(scaleArrowBasicLength - 10, 5),           //Third point
        // ]);

        // // // //Fill shape's color
        // arrowScale.endFill();
        // arrowScale.tint = "yellow"
        // arrowScale.rotation = -135 * Math.PI / 180;
        // this.addChild(arrowScale);
        // this.arrowScale = arrowScale;
    }

    // public updateScale(scale: number): void {
    //     let scaleLength = scaleArrowBasicLength * scale;
    //     this.arrowScale.clear();
    //     this.arrowScale.lineStyle(2, "yellow", 1);
    //     this.arrowScale.moveTo(0, 0);
    //     this.arrowScale.lineTo(scaleLength, 0);
    //     this.arrowScale.beginFill("yellow");
    //     this.arrowScale.drawPolygon([
    //         new Point(scaleLength - 10, -5),             //First point
    //         new Point(scaleLength, -5),              //Second point
    //         new Point(scaleLength, 5),           //Third point
    //         new Point(scaleLength - 10, 5),           //Third point
    //     ]);

    //     // // //Fill shape's color
    //     this.arrowScale.endFill();
    //     this.arrowScale.tint = "yellow"
    //     this.arrowScale.rotation = -135 * Math.PI / 180;
    // }
}